<template>
  <!-- 二手车详情   到店新车详情-->
  <div
    class="box newSource"
    style="padding-bottom:240px;position: relative;min-height:calc(100vh - 240px)"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <div v-show="!loading">
      <heads></heads>
      <!-- <tools></tools> -->

      <div class="particulars" style="margin:auto;width:1056px;">
        <div class="doorSeen">
          <div class="doorSeen_title" style="margin-top:20px;">
            历史记录
            <div
              style="cursor: pointer;margin-right:20px;"
              @click="historyBack"
            >
              返回
            </div>
          </div>
          <div class="doorSeen_center">
            <div
              class="left"
              style="margin-bottom:24px;"
              v-for="(item, index) in historyList"
              :key="index"
            >
              <el-input
                type="textarea"
                :value="item.recordDescription"
                :disabled="true"
                class="left_input"
                placeholder="上门记录"
                autosize
              ></el-input>
              <div class="left_tu">
                <div class="zhanshi">
                  <div
                    class="zhanshi_item"
                    v-for="(i, j) in item.imgvideo"
                    :key="j"
                    @mouseenter="immigration(i.id)"
                    @mouseleave="shiftOut()"
                  >
                    <video
                      :ref="'video' + i.id"
                      :id="'video' + i.id"
                      v-if="i.type == 2"
                      :src="i.path"
                      style="height: 150px; width: 150px"
                      controls="controls"
                    >
                      您的浏览器不支持视频播放
                    </video>
                    <img
                      v-else-if="i.type == 1"
                      style="height: 150px; width: 150px"
                      :src="i.path"
                      alt=""
                    />
                    <div
                      class="zhanshi_item_zz"
                      @click.stop=""
                      v-if="yiru == 'yiru' + i.id"
                    >
                      <!-- <img
                    
                    src="../../../assets/bbcz/del01.png"
                    alt=""
                  /> -->
                      <span
                        class="el-icon-zoom-in"
                        v-if="i.type == 1"
                        style="font-size:22px;color: #fff;"
                        @click.stop="preView(i, j, index)"
                      ></span>
                      <span
                        class="el-icon-full-screen"
                        v-if="i.type == 2"
                        @click.stop="houseVideoView(i, 'video' + i.id)"
                        style="color: white; font-size: 24px; margin-right: 12px"
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="left_time">
                <div class="imgs" @click="deleteDoor(item)">
                  <img
                    class="img"
                    src="../../../assets/smkg_del01.png"
                    alt=""
                  />
                </div>
                <div class="create">
                  {{ item.createDate }}
                </div>
              </div>
            </div>
            <div
              v-if="historyList.length == 0"
              style="height: 450px;display:flex;justify-content: center;width:100%"
            >
              <el-empty description="还没有上门记录呢"></el-empty>
            </div>
          </div>
        </div>

        <p class="mzsm">
          {{ disclaimerContent }}
          <!-- 免责声明：帮帮同城旨在为广大用户提供更丰富的信息，但由于部分信息因时间、政策变化等因素，且信息审核会有滞后性，会导致部分信息更新不同步，与实际情况可能存在偏差，一切信息以发布方官宣为准。帮帮同城不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或任何责任。 -->
        </p>
      </div>
      <floor></floor>
    </div>
  </div>
</template>
<script>
var count = 10086;
import floor from "../../../components/floor";
import heads from "../../../components/head";

export default {
  components: {
    floor,
    heads
  },
  data() {
    return {
      loading: true,
      user: {},
      historyList: [],
      loginstate: false,
      businessType: "",
      yiru: "",
      id: ""
    };
  },
  created() {
    this.getUser();
    if (this.$route.query.bid == 1) {
      this.getDisclaimers(5);
    } else if (this.$route.query.bid == 2) {
      if (this.$route.query.vt == 3) {
        this.getDisclaimers(11);
      } else {
        this.getDisclaimers(10);
      }
    } else if (this.$route.query.bid == 3) {
      this.getDisclaimers(12);
    }
  },
  watch: {
    "$route.query.id": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          //   this.init();
        }
        //判断newVal有没有值监听路由变化
      }
    }
  },
  methods: {
    deleteDoor(item) {
      this.$confirm("此操作将删除选中的上门看过记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.businessType == 1) {
            this.$postHttp("/mob/iteration/removeHouseVisited", {
              ids: item.id
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          } else if (this.businessType == 2) {
            this.$postHttp("/api/mobile/vehicleOwner/removeVisited", {
              ids: item.id
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          } else if (this.businessType == 3) {
            this.$postHttp("/api/mobile/personnelOwner/removeVisitedLook", {
              ids: item.id
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
          }
          setTimeout(() => {
            this.queryHistory(this.id);
          }, 500);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    historyBack() {
      if (!history.go(-1)) {
        if (getBrowserType() == "Chrome") {
          window.open("about:blank", "_self").close();
        } else {
          window.close();
        }
      }
      // window.history.back()
      // location.historyBack(-1)
    },
    //判断浏览器类型
    getBrowserType() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

      if (userAgent.indexOf("Firefox") > -1) {
        return "Firefox";
      } else if (userAgent.indexOf("Edge") > -1) {
        return "Edge";
      } else if (
        userAgent.indexOf("Opera") > -1 ||
        userAgent.indexOf("OPR") > -1
      ) {
        return "Opera";
      } else if (userAgent.indexOf("Chrome") > -1) {
        return "Chrome";
      } else if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
      } else if (
        userAgent.indexOf("MSIE") > -1 ||
        userAgent.indexOf("Trident") > -1
      ) {
        return "IE";
      }
    },
    houseVideoView(i, ref) {
      // var videoList = this.houseImage
      //   .filter((item) => item.type == "video")
      //   .map((item) => item.path);
      //    var index = imgList.findIndex((item) => item == i.path);
      //  this.$refs[count].$el.requestFullscreen()
      //    videoList[index].path
      //

      this.fullScreen(ref);
    },
    Screen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        // var videobox = document.getElementById("video");
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
      }
    },
    fullScreen(ele) {
      // let element =this.$refs[ele]
      let element = document.getElementById(ele);
      this.Screen(element);
    },
    getUser() {
      let user = localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo"))
        : null;
      if (user) {
        this.loginstate = true;
        this.user = user;
        if (this.$route.query.id && this.$route.query.bid) {
          this.businessType = this.$route.query.bid;
          this.id = this.$route.query.id;
          this.queryHistory(this.$route.query.id);
        }
      } else {
        this.loginstate = false;
      }
    },
    queryHistory(id) {
      var url;
      var param;
      if (this.businessType == 1) {
        url = "mob/iteration/queryHouseVisitedHistoryByUserIdAndHouseId";
        param = {
          userId: this.user.id,
          houseId: id
        };
      } else if (this.businessType == 2) {
        url = "/api/mobile/vehicleOwner/getVisitedHistoryByVehicleIdAndUserId";
        param = {
          userId: this.user.id,
          vehicleId: id,
          businessType: 2
        };
      } else if (this.businessType == 3) {
        url = "/api/mobile/personnelOwner/getVisitedLookHistoryByUserId";
        param = {
          userId: this.user.id,
          relatedBusiness: id,
          visitType: 1
        };
      }
      this.$getHttp(url, param).then(res => {
        if (this.businessType == 1) {
          var key = "visitedHistoryList";
        }
        if (this.businessType == 2) {
          var key = "visitedHistory";
        }
        if (this.businessType == 3) {
          var key = "visitedHistory";
        }
        if (res.code == 200) {
          res[key].pageList.map(item => {
            item.remarks = JSON.parse(item.remarks);
            item.imgvideo = [];
            item.remarks.map(item2 => {
              if (item2.type == "image") {
                item.imgvideo.push({
                  id: ++count,
                  type: 1,
                  path: item2.url
                });
              } else {
                item.imgvideo.push({
                  id: ++count,
                  type: 2,
                  path: item2.url
                });
              }
            });
          });
          //

          this.historyList = res[key].pageList;
          this.loading = false;
          console.log(this.historyList);
        }
      });
    },

    preView(i, j, index) {
      console.log(i, index);
      var index1 = this.historyList[index].imgvideo
        .filter(item => item.type == 1)
        .findIndex(item => i.path == item.path);
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index1, // 多图预览，默认展示第二张图片
        imgList: this.historyList[index].imgvideo
          .filter(item => item.type == 1)
          .map(item => {
            if (item.type == 1) return item.path;
          }) // 需要预览的多图数组
      });
    },
    immigration(id) {
      this.yiru = "yiru" + id;
    },
    shiftOut() {
      this.yiru = "";
    }
  }
};
</script>
<style lang="less" scoped>
.left {
  .left_input {
    // min-height: 58px;
    height: auto !important;
    box-sizing: border-box;
    padding-top: 13px;
    padding-bottom: 12px;
    /deep/textarea {
      border-width: 0;
      padding-left: 0px;
      padding-right: 0px;
      color: #999;
      font-size: 14px;
      font-weight: 500;
      word-break: break-all;
      resize: none;
      .el-input__count {
        bottom: 2px;
      }
    }
  }
}
.doorSeen {
  //   margin-bottom: 40px;
  .doorSeen_title {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .doorSeen_center {
    box-sizing: border-box;
    width: 1056px;
    // height: 262px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 27px;
    // display: flex;
    .left {
      width: 1000px;
      .left_input {
        width: 100%;
        height: 58px;
        border-bottom: 1px solid #e0e0e0;
        color: #999;
      }
      .left_tu {
        margin-top: 10px;

        .zhanshi {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .zhanshi_item {
            width: 150px;
            height: 150px;
            position: relative;
            margin-right: 20px;
            margin-bottom: 10px;
            transition: all 0.5s;
            .zhanshi_item_zz {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.7);
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }
        .kg {
          width: 150px;
          height: 150px;
          border: 1px solid #e0e0e0;
          text-align: center;
          line-height: 150px;
        }
      }
      .left_time {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        .imgs {
          width: 40px;
          height: 40px;
          cursor: pointer;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .create {
          text-align: right;
          margin-top: 7px;
          color: #333333;
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      align-items: flex-end;
      // justify-content: flex-end;
      .btn_bc {
        width: 80px;
        height: 50px;
        background-color: #64b6a8;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        margin-right: 10px;
      }
      .btn_qx {
        width: 80px;
        height: 50px;
        border: 1px solid #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }
}
</style>
